/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Platform,
    ScrollView
} from 'react-native';

/*---引入外部组件----*/
var DCCommonCell = require('./DCCommonCell');


var DCMore = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                {/*导航条*/}
                {this.renderNavBar()}

                <ScrollView>
                    <View style={{marginTop:20}}>
                        <DCCommonCell
                            title = "扫一扫"
                        />
                    </View>
                    <View style={{marginTop:20}}>
                        <DCCommonCell
                            title = "省流量模式"
                            isSwitch = {true}
                        />
                        <DCCommonCell
                            title = "消息提醒"
                        />
                        <DCCommonCell
                            title = "邀请好友使用怼码"
                        />
                        <DCCommonCell
                            title = "清除缓存"
                            rightTitle = "1.99M"
                        />
                    </View>
                    <View style={{marginTop:20}}>
                        <DCCommonCell
                            title = "问卷调查"
                        />
                        <DCCommonCell
                            title = "支付帮助"
                        />
                        <DCCommonCell
                            title = "网络诊断"
                        />
                        <DCCommonCell
                            title = "关于怼码"
                        />
                        <DCCommonCell
                            title = "我要应聘"
                        />
                    </View>
                    <View style={{marginTop:20}}>
                        <DCCommonCell
                            title = "精品应用"
                        />
                    </View>
                </ScrollView>
            </View>
        );
    },

    //返回导航条
    renderNavBar(){
        return(
            <View style={styles.navOutViewStyle}>
                <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>更多</Text>
                <TouchableOpacity onPress={()=>{alert('点击了')}} style={styles.rightViewStyle}>
                    <Image source={{uri: 'icon_mine_setting'}} style={styles.navImageStyle} />
                </TouchableOpacity>
            </View>
        );
    }
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    navImageStyle: {
        width:Platform.OS == 'ios' ? 28 : 24,
        height:Platform.OS == 'ios' ? 28 : 24,
    },
    rightViewStyle: {
        //绝对定位
        position: 'absolute',
        right: 10,
        bottom:15,
    },
    navOutViewStyle: {
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1.0)',
        //改变主轴方向
        flexDirection: 'row',
        //垂直居中--->设置侧轴的对齐方式
        alignItems: 'center',
        //主轴方向居中
        justifyContent: 'center',
    }
});

//输出组件类
module.exports = DCMore;